<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ page contentType="text/html; charset=UTF-8" %> 
<% request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Admin index Examples</title>
  <meta name="description" content="这是一个 index 页面">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/xSystem/css/xSystem.css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
</head>
<body>

<jsp:include page="../layouts/head.jsp"></jsp:include>

<div class="am-cf admin-main">
<jsp:include page="../layouts/menu.jsp"></jsp:include>
<!-- content start -->
<div class="admin-content">
	<div class="admin-content-body">
		<div class="am-cf am-padding am-padding-bottom-0">
			<div class="am-fl am-cf">
				<strong class="am-text-primary am-text-lg">添加商品</strong> / <small>Add
					Product</small>
			</div>
		</div>

		<hr>
		<form class="am-form" action="${pageContext.request.contextPath}/admin/product/update" method="post" enctype="multipart/form-data" >
			<input type="hidden" name="id" value="${product.id }"/>
			<div class="am-tabs am-margin" data-am-tabs="">
				<ul class="am-tabs-nav am-nav am-nav-tabs">
					<li class="am-active"><a href="#tab1">通用信息</a></li>
					<li><a href="#tab2">商品介绍</a></li>
					<!-- <li><a href="#tab3">SEO 选项</a></li> -->
				</ul>

				<div class="am-tabs-bd"
					style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">


					<div class="am-tab-panel am-fade am-in am-active" id="tab1">
						 <div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">商品类别</div>
							<div class="am-u-sm-8 am-u-md-10">
							
								<select data-am-selected="{btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}"
									name="category_id">

									<c:forEach items="${categories}" var="category">
										<option value="${category.id }">${category.name }</option>
									</c:forEach>
									
								</select>
							</div>
						</div>  

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">商品名称</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" class="am-input-sm" name="name" value="${product.name }">
							</div>
						</div>

						 <div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">单价</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
								<input type="text" class="am-input-sm" name="price" value="${product.price }">
							</div>
						</div>

						 <div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">库存</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
								<input type="text" class="am-input-sm" name="stock" value="${product.stock}">
							</div>
						</div> 
						
						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">库存</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
								<input type="text" class="am-input-sm" name="sortOrder" value="${product.sortOrder }">
							</div>
						</div> 


						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">缩略图</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
							<div class="am-form-group am-form-file">
								  <button type="button" class="am-btn am-btn-danger am-btn-sm">
								    <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
								  <input id="doc-form-file" type="file" name="file" multiple>
								</div>
								<div id="file-list">
									<img src="${product.thumb }" id="img_show" style="max-height: 200px;">
								</div>
								
							</div>
						</div>
						
						<div class="am-g am-margin-top sort">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">描述信息</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
								<textarea rows="4" name="depict">${product.depict }</textarea>
							</div>
						</div>
						
						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">上架</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
							
								<label class="am-radio-inline">
									<input type="radio"
										value="1" name="isOnsale" <c:if test="${product.isOnsale == 1}">checked</c:if>> 是
								</label> 
								
								<label class="am-radio-inline"> 
									<input type="radio" value="0" name="isOnsale" <c:if test="${product.isOnsale == 0}">checked</c:if>> 否
								</label>
							</div>
						</div>

						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">加入推荐</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
								<div class="am-btn-group" data-am-button="">
									<label class="am-btn am-btn-default am-btn-xs am-round"> 
										<input type="checkbox" name="isTop" value="1" <c:if test="${product.isTop == 1}">checked</c:if>> 置顶
									</label> 
									<label class="am-btn am-btn-default am-btn-xs am-round">
										<input type="checkbox" name="isRecommend" value="1" <c:if test="${product.isRecommend == 1}">checked</c:if>>推荐
									</label> <label class="am-btn am-btn-default am-btn-xs am-round">
										<input type="checkbox" name="isHot" value="1" <c:if test="${product.isHot == 1}">checked</c:if>> 热销
									</label> 
									<label class="am-btn am-btn-default am-btn-xs am-round">
										<input type="checkbox" name="isNew" value="1" <c:if test="${product.isNew == 1}">checked</c:if>> 新品
									</label>
								</div>
							</div>
						</div>

					</div> 

					<div class="am-tab-panel am-fade" id="tab2">

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-12 am-u-md-12">
								<div id="markdown">
                                      <textarea name="content" style="height: 300px">${product.content }</textarea>
								</div>
							</div>
						</div>

					</div>
					</div>
				</div>
			<div class="am-margin">
				<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
			</div>
		</form>
	</div>
	
	<jsp:include page="../layouts/foot.jsp"></jsp:include>
	</div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="${pageContext.request.contextPath}/static/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
<script>
$(function() {
  $('#doc-form-file').on('change', function() {
    var fileNames = '';
    $.each(this.files, function() {
      fileNames += '<span class="am-badge">' + this.name + '</span> ';
    });
    $('#file-list').html(fileNames);
  });
});
</script>
</body>
</html>